map {
	width: 100%;
	height: 100%;
}

.index {
	position: relative;
	height: 100%;
}

.out-box {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	.fixed-topbar {
		position: relative;
		.bg {
			width: 100%;
			height: 152px;
		}
		.fixed-item {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			pointer-events: auto;
			.title {
				display: flex;
				align-items: center;
				padding-left: 12upx;
				.logo {
					width: 296upx;
					height: 50upx;
				}
				.picker-view {
					color: #ffffff;
					font-size: 24upx;
					margin-left: 40upx;
					.iconfont {
						font-size: 20upx;
						margin-left: 10upx;
					}
				}
			}
		}
	}
	.banner {
		position: relative;
		z-index: 2;
		width: 96%;
		margin-left: auto;
		margin-right: auto;
		margin-top: -18%;
		pointer-events: auto;
		height: 166upx;
		swiper {
			height: 100%;
		}
		image {
			width: 100%;
			height: 100%;
		}
	}
	.sus-btns {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 40upx;
		margin-top: 20upx;
		&.mt-18 {
			margin-top: -18%;
		}
		.left {
			pointer-events: auto;
			image {
				width: 134upx;
				height: 129upx;
			}
		}
		.right {
			padding-left: 20upx;
			padding-right: 20upx;
			background-color: #fff;
			border-radius: 10upx;
			box-shadow: 0 0 10upx rgba($color: #000000, $alpha: .23);
			pointer-events: auto;
			button {
				padding: 30upx 0;
				background-color: #fff;
				.kf {
					width: 42upx;
					height: 41upx;
				}
			}
			.img-contain {
				padding-top: 30upx;
				padding-bottom: 30upx;
				.scan {
					width: 40upx;
					height: 40upx;
				}
				& + .img-contain {
					border-top: 1px solid #EBEBEB;
				}
			}
		}
	}
	.swiper-wrap {
		position: absolute;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		.loca {
			display: flex;
			justify-content: flex-end;
			padding-right: 30upx;
			margin-bottom: 30upx;
			.icon-loca {
				background: #fff;
				font-size: 60upx;
				color: #434343;
				border-radius: 10upx;
				padding: 2upx 8upx;
				box-shadow: 0 0 10upx rgba($color: #000000, $alpha: .23);
				pointer-events: auto;
			}
		}
		@keyframes slideUp {
			0% {
				opacity: 0;
				transform: translateY(100upx);
			}
			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
		@keyframes slideDown {
			0% {
				opacity: 1;
				transform: translateY(0);
			}
			100% {
				opacity: 0;
				transform: translateY(100upx);
			}
		}
		.swiper-card.loading {
			animation: slideDown .5s ease both;
		}
		.swiper-card {
			animation: slideUp .5s ease both;
			pointer-events: auto;
			background-color: #fff;
			margin: 30upx;
			border-radius: 30upx;
			padding: 30upx;
			box-shadow: 0 0 20upx rgba($color: #000000, $alpha: .15);
			.flex-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					display: flex;
					flex: 1;
					width: 1%;
					image {
						width: 150upx;
						height: 150upx;
						border-radius: 10upx;
					}
					.info {
						flex: 1;
						width: 1%;
						margin-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-right: 20upx;
						.tt {
							font-size: 36upx;
						}
						.bb {
							font-size: 24upx;
							color: #B3B3B3;
							.add {
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
							.iconfont {
								color: #828282;
								vertical-align: -1px;
								margin-right: 5upx;
							}
						}
					}
				}
				.right {
					button {
						border-radius: 10upx;
						border-style: solid;
						border-width: 1px;
						font-size: 28upx;
						padding: 10upx 15upx;
						background-color: #fff;
						.iconfont {
							margin-right: 5upx;
						}
					}
					.share {
						border-color: #242838;
						color: #242838;
					}
					.dh {
						border-color: #54ab60;
						color: #54ab60;
						margin-top: 20upx;
					}
				}
			}
			.flex-end {
				border-top: 1px solid #F0F0F0;
				padding-top: 30upx;
				padding-bottom: 10upx;
				margin-top: 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #242838;
				font-size: 24upx;
				.iconfont {
					vertical-align: -4upx;
					color: #C8C8C8;
				}
			}
		}
	}
}

.center-img {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 200upx;
	height: 72upx;
	margin: auto;
	.text {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		color: #fff;
		text-align: center;
		font-size: 12px;
		padding-top: 2px;
	}
	cover-image {
		width: 200upx;
		height: 72upx;
	}
}

.tab-card {
	position: absolute;
	z-index: 9;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 20upx 40upx;
	.loca {
		display: flex;
		justify-content: flex-end;
		padding-right: 30upx;
		margin-bottom: 30upx;
		.icon-loca {
			background: #fff;
			font-size: 60upx;
			color: #434343;
			border-radius: 10upx;
			padding: 2upx 8upx;
			box-shadow: 0 0 10upx rgba($color: #000000, $alpha: .23);
			pointer-events: auto;
		}
	}
	.row {
		background-color: #fff;
		border-radius: 32upx;
		pointer-events: auto;
		&:before,
		&:after {
			content: '';
			display: table;
			clear: both;
		}
		.col {
			float: left;
			width: 33.33%;
			padding-top: 40upx;
			padding-bottom: 40upx;
			&.bdtp {
				border-top: 1px solid #F5F5F5;
			}
			&.bdlr {
				border-left: 1px solid #f5f5f5;
				border-right: 1px solid #f5f5f5;
			}
			image {
				width: 54upx;
				height: 54upx;
				margin-left: auto;
				margin-right: auto;
			}
			.text {
				font-size: 24upx;
				text-align: center;
				font-weight: bold;
				margin-top: 15upx;
			}
		}
	}
}